<template>
  <!-- 新建连接界面 -->
  <div class="sub-view-new-connaction" style="overflow: auto;">
    <el-drawer
      class="sub-view-new-connaction-drawer"
      title="连接管理"
      :size='newConnactionState.size'
      :visible.sync="newConnactionState.drawer"
      :direction="newConnactionState.direction"
    >
      <div class="content">
        <el-tabs class="connection-tabs padding-x" value="base">
          <el-tab-pane label="基础" name="base" class="connection-tab">
            <el-scrollbar class="connection-scrollbar">
              <div class="new  ">
                <el-input
                  class="padding-y"
                  placeholder="请输入连接名（必填项）"
                  v-model="connactionConfig.name"
                  clearable
                />
                <el-input
                  class="padding-y"
                  placeholder="请输入主机地址（必填项）"
                  v-model="connactionConfig.host"
                  clearable
                />

                <el-input
                  class="padding-y"
                  placeholder="请输入用户名（必填项）"
                  v-model="connactionConfig.user"
                  clearable
                />
                <el-input
                  class="padding-y"
                  placeholder="请输入密码（必填项）"
                  v-model="connactionConfig.password"
                  show-password
                />
                <el-tooltip
                  class="item padding-y"
                  effect="dark"
                  content="端口号（默认3306）"
                  placement="top-end"
                >
                  <el-input
                    class=""
                    placeholder="请输入端口号（选填项）"
                    v-model="connactionConfig.port"
                    clearable
                  />
                </el-tooltip>
                <el-input
                  class="padding-y"
                  placeholder="请输入数据库（选填项）"
                  v-model="connactionConfig.database"
                  clearable
                />
                <el-input
                  class="padding-y"
                  type="textarea"
                  placeholder="请输入备注（选填项）"
                  v-model="connactionConfig.description"
                  maxlength="30"
                  show-word-limit
                />

                <!-- 新建连接、测试、取消 -->
                <div class="action padding-y">
                  <el-button type="primary" round @click="newConnact"
                    >连接</el-button
                  >
                  <el-button round plain @click="canelNewConnact"
                    >取消</el-button
                  >
                  <el-button type="warning" round @click="testConnact"
                    >测试</el-button
                  >
                </div>
              </div>
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane label="配置管理" name="second" class="connection-tab">
            <el-scrollbar class="connection-scrollbar">
              <div class="" style="font-size:13px">
                配置管理（连接池配置 - connectionLimit，默认不适用连接池）
              </div>
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane label="SSL" name="ssl">
            <div class="" style="font-size:13px">
              SSL连接
            </div>
          </el-tab-pane>
        </el-tabs>

        <!-- 现有连接 -->
        <div class="has-connaction">
          <el-scrollbar class="list">
            <div class=" padding-x">
              <div class="open-close open">
                <!-- 横线 -->
                <el-divider>
                  <span>已经连接配置</span>
                </el-divider>
              </div>
              <!-- 打开的 -->
              <template v-for="(item, index) in opendedsGetter">
                <div
                  class="connaction padding-y padding-x "
                  :key="index + 'opended'"
                >
                  <div class="header">
                    <div class="name">{{ item.name }}</div>
                    <div class="action">
                      <icon
                        name="icon-guanbi"
                        :title="text.close"
                        @click.native="closeConnect(item._id)"
                      ></icon>
                      <icon
                        name="icon-shanchu"
                        :title="text.remove"
                        @click.native="removeConnect(item._id)"
                      ></icon>
                    </div>
                  </div>

                  <div
                    class="address"
                    :title="
                      `${item.user}@${item.host}:${item.port}?database:${
                        item.database == '' ? 'none' : item.database
                      }`
                    "
                  >
                    {{ item.user }}@{{ item.host }}:{{ item.port }}?database:{{
                      item.database == '' ? 'none' : item.database
                    }}
                  </div>
                </div>
              </template>

              <div v-if="opendedsGetter.length == 0" class="open-null">
                空
              </div>


              <div class="open-close close">
                <el-divider>
                  <span>未连接配置</span>
                </el-divider>
              </div>
              <!-- 关闭的 -->
              <template v-for="(item, index) in closedsGetter">
                <div
                  class="connaction close padding-y padding-x "
                  :key="index + 'closed'"
                >
                  <div class="header">
                    <div class="name">{{ item.name }}</div>
                    <div class="action">
                      <!-- 打开链接 -->
                      <icon
                        name="icon-lianjie"
                        :title="text.open"
                        @click.native="openConnect(item._id)"
                      ></icon>
                      <!-- 删除链接 -->
                      <icon
                        name="icon-shanchu"
                        :title="text.remove"
                        @click.native="removeConnect(item._id)"
                      ></icon>
                    </div>
                  </div>
                  <div
                    class="address"
                    :title="
                      `${item.user}@${item.host}:${item.port}?database:${
                        item.database == '' ? 'none' : item.database
                      }`
                    "
                  >
                    {{ item.user }}@{{ item.host }}:{{ item.port }}?database:{{
                      item.database == '' ? 'none' : item.database
                    }}
                  </div>
                </div>
              </template>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name:'connects-view',
  computed: {
    ...mapState({
      newConnactionState: state => state.ui.newConnaction,
      connectListState: state => state.connect.list
    }),
    ...mapGetters({
      opendedsGetter: 'connect/openeds',
      closedsGetter: 'connect/closeds'
    })
  },
  methods: {
    /**取消新建 */
    canelNewConnact() {
      // 清空 connactionConfig
      this.$utils.clear(this.connactionConfig, '')
      this.newConnactionState.drawer = false
    },
    /** 关闭连接 */
    closeConnect(connID) {
      this.$store.dispatch('connect/closeConnect', { connID: connID })
    },
    /** 删除连接 */
    removeConnect(connID) {
      this.$store.dispatch('connect/removeConnect', { connID: connID })
    },
    /** 重连连接 */
    openConnect(connID) {
      this.$store.dispatch('connect/openConnect', { connID: connID })
    },
    /** 获取连接 - 保存到数据库中的连接 */
    queryConnect() {
      this.$https.post('/query-connect').then(resp => {
        if (resp.data.code == 200) {
          // 1、获取连接成功
          // 2、设置到state中
        } else {
          // 获取连接失败，弹出提示框
        }
      })
    },
    /** 新建连接 */
    newConnact() {
      this.$store.dispatch('connect/newConnect', this.connactionConfig)
    },
    // 测试连接
    testConnact() {
      this.$store.dispatch('connect/testConnect',this.connactionConfig)
    }
  },
  data() {
    return {
      eventName: 'eventClick',


      text:{
        close:'关闭连接',
        open:'打开连接',
        remove:'删除连接'
      },

      connactionConfig: {
        // 连接名称
        name: '新连接',
        // 主机地址
        host: 'localhost',
        // 端口号
        port: '3306',
        // 账户名
        user: 'root',
        // 密码
        password: 'root',
        // 数据库名
        database: '',
        // 描述
        description: ''
      }
    }
  }
}
</script>

<style lang="scss">
.el-drawer {
  height: 100%;
  //   position: relative;
}
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}

.sub-view-new-connaction-drawer {
  .content {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;

    .connection-tabs {
      height: 40%;
      position: absolute;
      width: 100%;
      box-sizing: border-box;
      .el-tabs__content {
        height: 100%;
      }
      .connection-tab {
        height: 100%;
        .connection-scrollbar {
          height: 100%;

          .new {
            height: 100%;
            .action {
              display: flex;
              //   flex-direction: column;
              justify-content: space-between;

              .el-button {
                margin: 0px;
                padding: 8px 20px;
              }
            }
            .el-tooltip.item {
              padding-left: 0px;
            }
          }
        }
      }
    }

    .has-connaction {
      overflow: hidden;
      position: absolute;
      border-top: #929598 1px solid;
      bottom: 20px;
      width: 100%;
      height: 50%;
      .list {
        height: 100%;
        flex: 1;
        padding-bottom: 50px;

        .open-null{
          display: flex;
          justify-content: center;
          align-items: center;
        }
        // 关闭的
        .connaction.close{
          opacity: 0.7;
        }
        .connaction.close:hover{
          opacity: 1;
        }
        .connaction {
          box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 6px 0px;
          .header {
            display: flex;
            justify-content: space-between;
            .name {
              display: block;
              font-size: 0.95em;
              font-weight: bold;
              margin-bottom: 5px;
            }
            .action {
              display: flex;
              .icon-svg {
                margin-left: 10px;
                opacity: 0.6;

                width: 1em !important;
                height: 1em !important;

                cursor: pointer;
              }
            }
            .icon:hover .icon-svg {
              opacity: 1;
            }
            // 删除
            .icon:hover .icon-shanchu {
              color: red;
            }
          }
          .address {
            font-size: 13px;
            color: #929598 !important;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        .connaction:hover {
          box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
          // cursor: pointer;
        }
      }
    }
  }
}
.padding-x {
  padding-left: 20px;
  padding-right: 20px;
}
.margin-x {
  margin-left: 20px;
  margin-right: 20px;
}

.padding-y {
  padding-top: 7px;
  padding-bottom: 7px;
}
</style>